<template>
    <div class="app-container">
        <div class="layout-content">
            <loading :loadingFlag="loadingFlag" :text="'文件上传中...'" />
            <van-form>
                <van-cell-group inset>
                    <van-field v-model="model.testCommissionFormId" name="试验委托单号" label="试验委托单号" placeholder="请选择试验委托单号"
                        readonly :rules="[{ required: false, message: '请选择试验委托单 ' }]" />
                    <van-field v-model="model.vin" name="样车编号VIN" label="样车编号VIN" placeholder="请输入样车编号VIN"
                        :rules="[{ required: false, message: '请输入样车编号VIN' }]" />
                    <van-field v-model="model.severity" name="严重度" label="严重度" placeholder="请选择严重度"
                        @click="projectShow = true" readonly :rules="[{ required: false, message: '请选择严重度' }]" />
                    <van-field v-model="model.problemTitle" name="问题标题" label="问题标题" placeholder="请输入问题标题"
                        :rules="[{ required: false, message: '请输入问题标题' }]" />
                    <van-field v-model="model.problemDescription" name="问题描述" label="问题描述" placeholder="请输入问题描述"
                        :rules="[{ required: false, message: '请输入问题标题' }]" />
                    <van-field v-model="model.problemDescription" :label-align="'rigth'" name="uploader" label="问题描述附件">
                        <template #input>
                            <!--  -->
                            <van-uploader ref="uploader" v-if="!model.fileId.length" style="width: 100%"
                                v-model="model.fileId" :max-count="1" :accept="''" :max-size="50 * 1024 * 1024"
                                @oversize="onOversize" :after-read="(file) => {
                                        recordApprovaAfterRead(file);
                                    }
                                    ">
                                <van-button size="small" style="width: 80px" type="primary">上传文件</van-button>
                            </van-uploader>
                            <div class="file_class" v-if="model.fileName">
                                <span>{{ model.fileName }}</span>
                                <van-icon name="delete-o" size="16" color="#1989fa" @click="clearFile" />
                            </div>
                        </template>
                    </van-field>
                </van-cell-group>
                <van-row style="padding: 30px 0 90px">
                    <van-col span="12" style="text-align: center">
                        <van-button @click="cancel">取消</van-button>
                    </van-col>
                    <van-col span="12" style="text-align: center">
                        <van-button @click="handlersave" type="info">保存</van-button>
                    </van-col>
                </van-row>
            </van-form>
            <van-popup v-model="projectShow" round position="bottom">
                <van-picker title="严重度" show-toolbar :columns="sheet" @confirm="onConfirm" @cancel="onCancel" />
            </van-popup>
        </div>
        <!-- <div class="layout-footer">
      <TabBar :activeTab="1"></TabBar>
    </div> -->
    </div>
</template>

<script>
import loading from "../components/loading.vue";
import { Dialog } from "vant";
import { Notify } from "vant";
import { axios } from "@/utils/request";
import { ajaxGetDictItems } from "@/api/api";
import TabBar from "@/components/TabBar";
import dayjs from "dayjs";
import { Toast } from "vant";
import { getAction, postAction } from "@/api/manage";
export default {
    data () {
        return {
            sheet: [],
            loadingFlag: false,
            projectShow: false,
            model: {
                fileId: [],
            },

            url: {
                limsProjectList: "/lims/limsProject/list",
                detail: "activitiProcess/queryProcessByKey",
                ProcessNodeList: "actProcessIns/queryProcessNodeList",
                add: "actBusiness/add",
                samplelist: "/lims/limsProjectSample/queryById",
                queryProjectBySampleId:
                    "lims/limsProjectSampleOrder/queryProjectBySampleId",
            },
            uploadUrl: "sys/attachment/upload",
            params: {
                procDeTitle: "",
                procDefId: "",
                processKey: this.$route.query.processKey,
                tableName: "",
            },
        };
    },
    created () {
        //获取流程信息
        this.getDetail();
        // //获取流程人员
        // this.getProcessNodeList();
        //获取样品信息
        this.getSampleDetial();

        //获取字典
        this.getinitDictData();
        // this.getqueryProjectBySampleId();
        //获取委托单
        if (this.$route.query.projectCode) {
            this.model.testCommissionFormId = this.$route.query.projectCode;
            getAction(this.url.limsProjectList, {
                projectCode: this.$route.query.projectCode,
            }).then((res) => {
                if (res.success) {
                    let { id, projectCode } = res.result.records[0];
                    this.model.testCommissionForm = id;
                    this.model.testCommissionFormId = projectCode;
                }
            });
        }
    },
    methods: {
        clearFile () {
            this.model.fileId = [];
            this.model.fileName = "";
        },
        onOversize () {
            Toast("文件大小不能超过 500mb");
        },
        //文件上传
        recorUploadImg (file) {
            console.log(file, "file1");
            const formData = new FormData();
            formData.append("file", file.file);
            formData.append("biz", "temp");
            axios
                .post(this.uploadUrl, formData, {
                    "content-type": "multipart/form-data",
                })
                .then((res) => {
                    console.log(res);

                    if (res.success) {
                        this.loadingFlag = false;
                        this.model.fileId = [res.result.id];
                        this.model.fileName = res.result.fileUploadName;

                        // item.devicePointcheckCheckList.defectAttachment = item
                        //   .devicePointcheckCheckList.defectAttachment
                        //   ? item.devicePointcheckCheckList.defectAttachment +
                        //     "," +
                        //     res.result.id
                        //   : res.result.id;
                        // item.devicePointcheckCheckList.defectAttachment = res.result.id;
                        // item.devicePointcheckCheckList.defectRecord = "无";
                        // this.userInfo.avatar = res.message;
                        // postAction(this.url.edit, this.userInfo).then((res) => {
                        //   if (res.success) {
                        //     console.log(res);
                        //   }
                        // });
                        this.loadingFlag = false;
                    } else {
                        this.loadingFlag = false;
                        Notify({
                            type: "warning",
                            message: "上传失败",
                        });
                        file.status = "failed";
                        file.message = "上传失败";
                    }
                })
                .catch((err) => {
                    Notify({
                        type: "warning",
                        message: "上传失败",
                    });
                    file.status = "failed";
                    file.message = "上传失败";
                });
        },
        //文件上传
        recordApprovaAfterRead (file, item) {
            console.log(file, "file2");
            this.loadingFlag = true;
            if (file instanceof Array) {
                file.map((v) => {
                    v.status = "uploading";
                    v.message = "上传中...";
                    this.recorUploadImg(v);
                });
            } else {
                file.status = "uploading";
                file.message = "上传中...";
                this.recorUploadImg(file);
            }
        },
        //保存
        async handlersave () {
            await Dialog.confirm({
                title: "",
                message: "请选择上传的问题类型",
                cancelButtonText: "新品问题管理",
                confirmButtonText: "量产问题管理",
            })
                .then(() => {
                    this.model.problemType = 1;
                    // on confirm
                })
                .catch(() => {
                    this.model.problemType = 2;
                    // on cancel
                });
            this.model.limsProblemManagerProblem = {};
            if (this.model.fileId.length) {
                this.model.limsProblemManagerProblem.problemDescriptionFile =
                    this.model.fileId[0];
            }
            if (this.model.problemTitle) {
                this.model.limsProblemManagerProblem.problemTitle =
                    this.model.problemTitle;
            }
            if (this.model.problemDescription) {
                this.model.limsProblemManagerProblem.problemDescription =
                    this.model.problemDescription;
            }
            this.model.limsProblemManagerProduct = {};
            this.model.projectType = "inner";
            this.model.methodName = "projectCreate";
            let params = {
                procDeTitle: "【问题发起】",
                procDefId: "问题发起流程:6:3342947",
                processKey: "lims_problem_edit",
                tableName: "lims_problem_manager_basic",
                formData: this.model,
                tableId: "",
            };
            params.formData.flag = 1;
            postAction(this.url.add, params).then((res) => {
                if (res.success) {
                    Notify({ type: "success", message: res.message });
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 300);
                } else {
                    Notify({ type: "warning", message: res.message });
                }
            });
        },
        //获取字典
        getinitDictData () {
            ajaxGetDictItems("severity", null).then((res) => {
                if (res.success) {
                    console.log(res.result);
                    this.sheet = res.result;
                }
            });
        },
        //领样取消
        cancel () {
            this.$router.go(-1);
        },

        //点击确认
        onConfirm (val) {
            this.projectShow = false;
            console.log(val);
            this.model.severity = val.label;
        },
        //点击取消
        onCancel () {
            this.projectShow = false;
        },
        // getqueryProjectBySampleId() {
        //   let params = {
        //     id: this.$route.query.tableId,
        //   };
        //   getAction(this.url.queryProjectBySampleId, params).then((res) => {
        //     if (res.success) {
        //       console.log(res.result);
        //       this.sheet = res.result.map((item) => {
        //         return {
        //           ...item,
        //           text: item.projectCode,
        //           value: item.id,
        //         };
        //       });
        //     }
        //   });
        // },
        getSampleDetial () {
            let params = {
                id: this.$route.query.tableId,
            };
            getAction(this.url.samplelist, params).then((res) => {
                if (res.success) {
                    console.log(this.$store.getters.userInfo);
                    console.log(res.result);
                    this.model = res.result;
                    this.params.procDeTitle += res.result.sampleName;
                    this.$set(
                        this.model,
                        "applyPerson",
                        this.$store.getters.userInfo.username
                    );
                    this.$set(
                        this.model,
                        "applyOrg",
                        this.$store.getters.userInfo.orgCode
                    );
                    this.$set(
                        this.model,
                        "orgCodeTxt",
                        this.$store.getters.userInfo.orgCodeTxt
                    );
                    // applyPersonTxt;
                    this.$set(
                        this.model,
                        "applyPersonTxt",
                        this.$store.getters.userInfo.realname
                    );
                }
            });
        },
        // getProcessNodeList() {
        //   let params = {
        //     processKey: this.$route.query.processKey,
        //     // tableId: this.$route.query.tableId,
        //   };
        //   getAction(this.url.ProcessNodeList, params).then((res) => {
        //     if (res.success) {
        //       this.params.processNodeList = res.result.slice(
        //         1,
        //         res.result.length - 1
        //       );
        //       this.params.assignees = res.result[1].assignees;
        //       console.log(res);
        //     }
        //   });
        // },
        getDetail () {
            let params = {
                processKey: this.$route.query.processKey,
                // tableId: this.$route.query.tableId,
            };
            getAction(this.url.detail, params).then((res) => {
                if (res.success) {
                    this.params.procDeTitle = `【${res.result.name}】`;
                    this.params.procDefId = res.result.id;
                    this.params.tableName = res.result.businessTable;
                    console.log(res);
                }
            });
        },
    },
    components: {
        TabBar,
        loading,
    },
};
</script>

<style lang="scss" scoped>
.app-container {
    ::v-deep {
        .file_class {

            // background: red;
            span {
                vertical-align: middle;
            }

            .van-icon {
                vertical-align: middle;
                margin-left: 5px;
            }
        }

        .van-uploader {
            .van-uploader__wrapper {
                .van-uploader__preview {
                    display: none;
                }

                .van-uploader__input-wrapper {
                    width: 300px;
                }
            }
        }
    }

    .layout-content {
        ::v-deep {

            .van-field--error .van-field__control,
            .van-field--error .van-field__control::placeholder {
                color: #969799 !important;
                -webkit-text-fill-color: currentColor;
                // background-color: red;
            }
        }
    }
}

.van-button {
    width: 70%;
    border-radius: 5px;
}
</style>
